<template>
  <div>
    <!-- <el-text type="success">ProcedureView</el-text> -->
    <Filter v-if="showFilter" @do="handleDoFilter" />
    <Playground v-else :filter="filterContent" @back="handleBack" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";

import Filter from "./Filter/index.vue";
import Playground from "./Playground/index.vue";

const showFilter = ref(true);

const filterContent = ref(null);

const handleDoFilter = (value) => {
  filterContent.value = value;
  showFilter.value = false;
};

const handleBack = () => {
  showFilter.value = true;
};
</script>
